<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
$destroy销毁了什么？
    1.vm并没有销毁，销毁的是vm上的一些功能
    2.销毁后借助Vue开发者工具看不到任何信息。
    3.之前绑定的事件还在不在？———— 在。
    4.DOM Listener还在不在？———— 在。
    5.Data Binding在不在？ ———— 不在。
    6.自定义事件在不在？———— 不在。
    7.watcher还在不在？ ———— 不在。
-->
<div id="root">
    <h2 :style="{opacity:bian}">假期怎么办?</h2>
    <button @click="death">去爬山</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    new Vue({
        el: "#root",
        data() {
            return {
                bian: '1'
            }
        },
        methods: {
            death() {
                //销毁当前的vm
                this.$destroy()
                console.log("****", this)
            }
        },
        //挂载完毕(vm真正'接手了"root 容器 即接手完毕)
        mounted() {
            this.tid = setInterval(() => {
                console.log('定时器执行了')
                this.bian-=0.01
                if (this.bian<=0) this.bian=1
            },16)
        },

        //将要销毁
        beforeDestroy(){
            console.log('我是vm ')
            clearInterval(this.tid)
        }
    })
</script>
</body>
</html>
